import formatRichText from '@/utils/dealWithTextImg'
import { useObserver } from 'mobx-react'
import Hook from './hook'
import styles from './index.module.less'
import ShareModal from '../ShareModal'
import DescModal from './DescModal'
import { useEffect } from 'react'

export default function (props) {
    const { id } = props

    const hook = new Hook(id)

    return useObserver(() => {
        useEffect(() => {
            if (hook.detail?.name) {
                document.title = hook.detail?.name
            }
        }, [hook])

        return (
            <div className={styles.container}>
                {/* 顶部背景图 */}
                {/* <img
                    className={styles.cover}
                    src={hook.detail?.cover}
                    onError={({ currentTarget }) => {
                        currentTarget.onError = null
                        currentTarget.src = hook.defaultListImage
                    }}
                /> */}

                {/* 测评信息 */}
                <div className={styles.content_box}>
                    <span className={styles.content_title}>{hook.detail?.name}</span>
                    <span className={styles.content_desc}>{hook.detail?.detail}</span>
                    <div className={styles.content_info}>
                        {/* <div>
                            <div className={styles.info_title}>
                                <span className={styles.value_text}>
                                    {(hook.detail?.publish && hook.detail?.publish?.person_total) ||
                                        0}
                                </span>
                                人
                            </div>
                            <div className={styles.info_desc}>已完成测评</div>
                        </div> */}
                        {/* <div className={styles.split_sign} /> */}
                        <div>
                            <div className={styles.info_title}>
                                <span className={styles.value_text}>{hook.detail?.question_count || 0}</span>题
                            </div>
                            <div className={styles.info_desc}>测评题数</div>
                        </div>
                        <div className={styles.split_sign} />
                        <div>
                            <div className={styles.info_title}>
                                <span className={styles.value_text}>{hook.detail?.time || 0}</span>
                                分钟
                            </div>
                            <div className={styles.info_desc}>预计用时</div>
                        </div>
                    </div>
                </div>

                {/* 测评介绍 */}
                <div className={styles.introduction_box}>
                    <div className={styles.introduction_title}>测评介绍</div>
                    <div
                        className={styles.introduction_content}
                        dangerouslySetInnerHTML={{
                            __html: formatRichText(hook.detail?.info),
                        }}
                    />
                </div>

                {/* 测前说明 */}
                {hook.detail?.eval_explain && (
                    <div className={styles.introduction_box2}>
                        <div className={styles.introduction_title}>测前说明</div>
                        <div
                            className={styles.introduction_content}
                            dangerouslySetInnerHTML={{
                                __html: formatRichText(hook.detail?.eval_explain),
                            }}
                        />
                    </div>
                )}

                {/* 操作 */}
                <div className={styles.operate_box}>
                    {/* <div
                        className={styles.operate_share}
                        onClick={() => {
                            hook.setShareModalVisible(true)
                        }}
                    >
                        <div className={styles.operate_share_icon} />
                        <span>分享</span>
                    </div> */}

                    {hook.resultId && (
                        <div className={styles.operate_result} onClick={hook.toResult}>
                            <div className={styles.operate_result_icon} />
                            <span>结果</span>
                        </div>
                    )}

                    <div className={styles.start_test} onClick={hook.startTest}>
                        {hook.resultId ? '再测一次' : '立即测试'}
                    </div>
                </div>

                {/* 测评说明弹窗 */}
                <DescModal visible={hook.modalVisible} content={hook.detail?.eval_explain} onCancel={hook.hideModal} onOk={hook.startTest} />

                {/* 分享指引弹窗 */}
                <ShareModal
                    visible={hook.shareModalVisible}
                    onKnow={() => {
                        hook.setShareModalVisible(false)
                    }}
                />
            </div>
        )
    })
}
